<template>
	<view class="home">
		<swiper class="swiper" indicator-dots autoplay circular>
			<swiper-item v-for="item in lunboDatas" :key="item.id"><image :src="item.image_src"></image></swiper-item>
		</swiper>
		<view class="tabnav">
			<view class="tabnav-item" v-for="(item, index) in navs" @click="handelNavTo(item.path)">
				<view :class="item.icon"></view>
				<text>{{ item.title }}</text>
			</view>
		</view>
		<!-- 商品推荐 -->
		<view class="pick-week">
			<view class="pick-week-layout">
				<view class="pick-week-title">推荐商品</view>
				<view class="pick-week-content">
					<!-- 使用推荐商品的组件 -->
					<recommend-shop @goodsItemClick="navGoodsDetail" :goodsDataLists="goodsDataLists"></recommend-shop>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import recommendShop from '../../components/recommend-shop/recommend-shop.vue';
import { apiGetLunBoDatas, apiGetGoodsDatas } from '../../util/user.js';
export default {
	components: {
		recommendShop
	},
	data() {
		return {
			lunboDatas: [],
			goodsDataLists: [],
			navs: [
				{
					icon: 'iconfont icon-fuwuchaoshi',
					title: '糖小梁超市',
					path: '/pages/goods/goods'
				},
				{
					icon: 'iconfont icon-guanyuwomen',
					title: '联系我们',
					path: '/pages/contact/contact'
				},
				{
					icon: 'iconfont icon-tupian',
					title: '社企图片',
					path: '/pages/pics/pics'
				},
				{
					icon: 'iconfont icon-shipin',
					title: '学习视频',
					path: '/pages/videos/videos'
				}
			],
			queryParams: {
				query: '',
				cid: '5',
				pagenum: 1,
				pagesize: 10
			},
			//页数
			totalPages: 1
		};
	},
	onLoad() {
		this.getLunBoDatas();
		this.getGoodsDatas();
	},
	methods: {
		//获取轮播图的数据
		getLunBoDatas() {
			apiGetLunBoDatas().then(res => {
				if (res.data.meta.status == 200) {
					this.lunboDatas = res.data.message;
				} else {
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					});
				}
			});
		},
		//获取商品列表的数据
		getGoodsDatas() {
			apiGetGoodsDatas(this.queryParams).then(res => {
				// console.log(res.data)
				// 条数
				const total = res.data.message.total;
				// 页数
				this.totalPages = Math.ceil(total / this.queryParams.pagesize);
				this.goodsDataLists = [...this.goodsDataLists,...res.data.message.goods];
				// console.log(res.data.message.goods);
				uni.stopPullDownRefresh();
			});
		},
		//跳转页面
		handelNavTo(url) {
			uni.navigateTo({
				url
			});
		},
		//跳转到商品详情页
		navGoodsDetail(id) {
			console.log(id,"index")
			uni.navigateTo({
				url: '/pages/goods-detail/goods-detail?goods_id=' + id
			});
		}
	},
	onReachBottom: function(e) {
		if (this.queryParams.pagenum >= this.totalPages) {
			// console.log("没有下一页数据");
			uni.showToast({
				title: '我是有底线的哟'
			});
		} else {
			// console.log("请加载下一页数据");
			this.queryParams.pagenum++;
			this.getGoodsDatas();
		}
	}
};
</script>

<style lang="scss" scoped>
.home {
	margin: 20rpx 0;
	.swiper {
		margin: 0 20rpx;
		swiper-item {
			border-radius: 10rpx;
			image {
				width: 100%;
			}
		}
	}
	.tabnav {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin: 35rpx 0;
		.tabnav-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			view {
				width: 125rpx;
				height: 125rpx;
				background-color: #b50e03;
				border-radius: 50%;
				line-height: 125rpx;
				font-size: 55rpx;
				color: #ffffff;
				margin-bottom: 25rpx;
			}
		}
		text {
			font-size: 34rpx;
		}
	}
	.pick-week {
		border-top: 5rpx solid #ccc;
		background-color: #ccc;
		.pick-week-layout {
			.pick-week-title {
				background-color: #ffffff;
				padding: 35rpx;
				font-size: 45rpx;
				color: #b50e03;
				text-align: center;
				letter-spacing: 45rpx;
				font-weight: 700;
				border-bottom: 5rpx solid #ccc;
				padding-bottom: 35rpx;
			}
			.pick-week-content {
				margin: 5rpx 5rpx;
			}
		}
	}
}
</style>
